<template>
    <!-- 分页 -->
    <div class="page">
        <Page :total="dataList.length" :current="currentPage" @on-change="pageChange" show-elevator show-total />
    </div>
</template>

<script>
    export default {
        props: {
            dataList: {
                type: [Object ,Array],
                default:  function(){
                    return []
                }
            }
        },
        watch: {
            dataList(){
                this.pagingProcessing()
            }
        },
        data() {
            return {
                /* 初始页 */
                currentPage: 1,
                /* 当前页面数据 */
                dataListActive: []
            }
        },
        mounted() {
            this.pagingProcessing()
        },
        methods: {
            /* 翻页触发事件 */
            pageChange(page) {
                this.currentPage = page
                this.pagingProcessing()
            },
            /* 分页处理 */
            pagingProcessing() {
                this.dataListActive = this.dataList.slice((this.currentPage-1 )* 10, 10 * this.currentPage)
                this.$emit("pagingProcessing", this.dataListActive)
            }
        }
    }
</script>

<style lang="less" scoped>
.page {
    margin-top: 20px;
    padding-bottom: 20px;
}
</style>